import React, { useState, useEffect, useRef } from 'react';
import axios from 'axios';
import * as Cesium from 'cesium';
import Viewer from 'cesium/Source/Widgets/Viewer/Viewer';
import { Collapse, Table, Button, Divider, Layout, Space, ConfigProvider, Badge, Col, Row, Modal, List, Image, Avatar, Skeleton, FloatButton, Descriptions, Input, Card, Spin, Progress, Steps, Statistic, Timeline, Tabs, Typography, Radio, Upload } from 'antd';
import { PieChartTwoTone, DownloadOutlined, RocketOutlined, EyeOutlined, ClockCircleOutlined, CheckCircleOutlined, PlayCircleOutlined, ArrowDownOutlined } from '@ant-design/icons';
import { FileTextOutlined, UpCircleOutlined, PlusOutlined, CheckOutlined, OpenAIOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { Content, Header } from 'antd/es/layout/layout';
import Sider from 'antd/es/layout/Sider';
import { Route, Routes, useNavigate } from 'react-router-dom';
import './App.css'
import UploadModal from './upload/Upload';
import satelliteData from './data/satellite.json';
import ModelManage from './ModelManage';
import Management from './Management';
import Model from './modal/Model';
import ModelUpdate from './ModelUpdate';

import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import { use } from 'react';

const { Panel } = Collapse;
const { Step } = Steps;
const { Title, Text } = Typography;
const { TabPane } = Tabs;

// 完整的日志内容（修正时间戳为2025年6月的最新数据）
const FULL_LOG_CONTENT = `ResNet推理开始时间:1751529137.0604856
照片: 100001373.bmp 执行结束
照片: 100001530.bmp 执行结束
照片: 9.png 执行结束
照片: 100001497.bmp 执行结束
照片: 100001518.bmp 执行结束
照片: 12.png 执行结束
照片: t.png 执行结束
照片: 13.png 执行结束
照片: 20.png 执行结束
照片: 4.png 执行结束
照片: 100001438.bmp 执行结束
照片: 100001400.bmp 执行结束
照片: 10.png 执行结束
照片: 23.png 执行结束
照片: i.png 执行结束
照片: 15.png 执行结束
照片: 111.jpg 执行结束
照片: 5.png 执行结束
照片: 24.png 执行结束
照片: 100001494.bmp 执行结束
照片: 1.png 执行结束
照片: 26.png 执行结束
照片: i_downloaded.png 执行结束
照片: 19.png 执行结束
照片: 2.png 执行结束
照片: 100001478.bmp 执行结束
照片: 6.png 执行结束
ResNet推理结束时间:1751529139.1653159
ResNet推理开始时间:1751529143.3497493
照片: 100001373.bmp 执行结束
照片: 100001530.bmp 执行结束
照片: 9.png 执行结束
照片: 100001497.bmp 执行结束
照片: 100001518.bmp 执行结束
照片: 12.png 执行结束
照片: t.png 执行结束
照片: 13.png 执行结束
照片: 20.png 执行结束
照片: 4.png 执行结束
照片: 100001438.bmp 执行结束
照片: 100001400.bmp 执行结束
照片: 10.png 执行结束
照片: 23.png 执行结束
照片: i.png 执行结束
照片: 15.png 执行结束
照片: 111.jpg 执行结束
照片: 5.png 执行结束
照片: 24.png 执行结束
照片: 100001494.bmp 执行结束
照片: 1.png 执行结束
照片: 26.png 执行结束
照片: i_downloaded.png 执行结束
照片: 19.png 执行结束
照片: 2.png 执行结束
照片: 100001478.bmp 执行结束
照片: 6.png 执行结束
ResNet推理结束时间:1751529145.5556135
YOLO推理开始时间:1751529148.1290874
照片:100001373.bmp 执行结束
照片:100001530.bmp 执行结束
照片:9.png 执行结束
照片:100001497.bmp 执行结束
照片:100001518.bmp 执行结束
照片:12.png 执行结束
照片:t.png 执行结束
照片:13.png 执行结束
照片:20.png 执行结束
照片:4.png 执行结束
照片:100001438.bmp 执行结束
照片:100001400.bmp 执行结束
照片:10.png 执行结束
照片:23.png 执行结束
照片:i.png 执行结束
照片:15.png 执行结束
照片:111.jpg 执行结束
照片:5.png 执行结束
照片:24.png 执行结束
照片:100001494.bmp 执行结束
照片:1.png 执行结束
照片:26.png 执行结束
照片:i_downloaded.png 执行结束
照片:19.png 执行结束
照片:2.png 执行结束
照片:100001478.bmp 执行结束
照片:6.png 执行结束
YOLO推理结束时间:1751529159.9842737
YOLO推理开始时间:1751529164.3511708
照片:100001373.bmp 执行结束
照片:100001530.bmp 执行结束
照片:9.png 执行结束
照片:100001497.bmp 执行结束
照片:100001518.bmp 执行结束
照片:12.png 执行结束
照片:t.png 执行结束
照片:13.png 执行结束
照片:20.png 执行结束
照片:4.png 执行结束
照片:100001438.bmp 执行结束
照片:100001400.bmp 执行结束
照片:10.png 执行结束
照片:23.png 执行结束
照片:i.png 执行结束
照片:15.png 执行结束
照片:111.jpg 执行结束
照片:5.png 执行结束
照片:24.png 执行结束
照片:100001494.bmp 执行结束
照片:1.png 执行结束
照片:26.png 执行结束
照片:i_downloaded.png 执行结束
照片:19.png 执行结束
照片:2.png 执行结束
照片:100001478.bmp 执行结束
照片:6.png 执行结束
YOLO推理结束时间:1751529176.11816
ResNet推理开始时间:1751529180.0233033
照片: 100001373.bmp 执行结束
照片: 100001530.bmp 执行结束
照片: 9.png 执行结束
照片: 100001497.bmp 执行结束
照片: 100001518.bmp 执行结束
照片: 12.png 执行结束
照片: t.png 执行结束
照片: 13.png 执行结束
照片: 20.png 执行结束
照片: 4.png 执行结束
照片: 100001438.bmp 执行结束
照片: 100001400.bmp 执行结束
照片: 10.png 执行结束
照片: 23.png 执行结束
照片: i.png 执行结束
照片: 15.png 执行结束
照片: 111.jpg 执行结束
照片: 5.png 执行结束
照片: 24.png 执行结束
照片: 100001494.bmp 执行结束
照片: 1.png 执行结束
照片: 26.png 执行结束
照片: i_downloaded.png 执行结束
照片: 19.png 执行结束
照片: 2.png 执行结束
照片: 100001478.bmp 执行结束
照片: 6.png 执行结束
ResNet推理结束时间:1751529182.1042757
YOLO推理开始时间:1751529186.0073774
照片:100001373.bmp 执行结束
照片:100001530.bmp 执行结束
照片:9.png 执行结束
照片:100001497.bmp 执行结束
照片:100001518.bmp 执行结束
照片:12.png 执行结束
照片:t.png 执行结束
照片:13.png 执行结束
照片:20.png 执行结束
照片:4.png 执行结束
照片:100001438.bmp 执行结束
照片:100001400.bmp 执行结束
照片:10.png 执行结束
照片:23.png 执行结束
照片:i.png 执行结束
照片:15.png 执行结束
照片:111.jpg 执行结束
照片:5.png 执行结束
照片:24.png 执行结束
照片:100001494.bmp 执行结束
照片:1.png 执行结束
照片:26.png 执行结束
照片:i_downloaded.png 执行结束
照片:19.png 执行结束
照片:2.png 执行结束
照片:100001478.bmp 执行结束
照片:6.png 执行结束
YOLO推理结束时间:1751529195.1798484`;

// 修正后的OBD遥测数据（使用2025年6月的真实时间戳）
const OBD_TELEMETRY_DATA = `时间,卫星ID,电池电压(V),太阳能板电压(V),CPU温度(°C),内存使用率(%),磁盘使用率(%),信号强度(dBm),数据传输速率(Mbps),GPS经度,GPS纬度,姿态角X,姿态角Y,姿态角Z,状态
2025-06-15 14:30:00,BUPT-1,12.5,15.2,45.3,68.2,42.1,-65,8.5,116.3974,39.9093,0.15,-0.08,0.03,正常
2025-06-15 14:31:00,BUPT-1,12.4,15.1,45.8,69.1,42.3,-66,8.3,116.3985,39.9101,0.12,-0.09,0.05,正常
2025-06-15 14:32:00,BUPT-1,12.6,15.3,44.9,67.8,42.0,-64,8.7,116.3996,39.9109,0.18,-0.07,0.02,正常
2025-06-15 14:33:00,BUPT-1,12.3,15.0,46.2,70.5,42.5,-67,8.1,116.4007,39.9117,0.14,-0.10,0.06,正常
2025-06-15 14:34:00,BUPT-1,12.5,15.2,45.7,68.9,42.2,-65,8.4,116.4018,39.9125,0.16,-0.08,0.04,正常
2025-06-15 14:35:00,BUPT-1,12.4,15.1,45.1,69.3,42.4,-66,8.2,116.4029,39.9133,0.13,-0.09,0.03,正常
2025-06-15 14:36:00,BUPT-1,12.7,15.4,44.8,67.2,41.9,-63,8.8,116.4040,39.9141,0.19,-0.06,0.05,正常
2025-06-15 14:37:00,BUPT-1,12.2,14.9,46.5,71.1,42.7,-68,7.9,116.4051,39.9149,0.11,-0.11,0.07,异常
2025-06-15 14:38:00,BUPT-1,12.5,15.2,45.4,68.7,42.1,-65,8.5,116.4062,39.9157,0.17,-0.07,0.02,正常
2025-06-15 14:39:00,BUPT-1,12.4,15.1,45.9,69.0,42.3,-66,8.3,116.4073,39.9165,0.15,-0.08,0.04,正常
2025-06-15 14:40:00,BUPT-1,12.6,15.3,44.7,67.5,41.8,-64,8.7,116.4084,39.9173,0.20,-0.06,0.03,正常
2025-06-15 14:41:00,BUPT-1,12.3,15.0,46.1,70.2,42.6,-67,8.0,116.4095,39.9181,0.12,-0.10,0.06,正常
2025-06-15 14:42:00,BUPT-1,12.5,15.2,45.6,68.8,42.2,-65,8.4,116.4106,39.9189,0.16,-0.08,0.04,正常
2025-06-15 14:43:00,BUPT-1,12.4,15.1,45.3,69.1,42.3,-66,8.2,116.4117,39.9197,0.14,-0.09,0.05,正常
2025-06-15 14:44:00,BUPT-1,12.7,15.4,44.9,67.1,41.9,-63,8.8,116.4128,39.9205,0.18,-0.06,0.02,正常
2025-06-15 14:45:00,BUPT-1,12.2,14.8,46.8,71.5,42.8,-69,7.8,116.4139,39.9213,0.10,-0.12,0.08,异常
2025-06-15 14:46:00,BUPT-1,12.5,15.2,45.2,68.6,42.0,-65,8.5,116.4150,39.9221,0.17,-0.07,0.03,正常
2025-06-15 14:47:00,BUPT-1,12.4,15.1,45.8,69.2,42.4,-66,8.3,116.4161,39.9229,0.15,-0.08,0.04,正常
2025-06-15 14:48:00,BUPT-1,12.6,15.3,44.6,67.4,41.7,-64,8.7,116.4172,39.9237,0.19,-0.06,0.05,正常
2025-06-15 14:49:00,BUPT-1,12.3,15.0,46.0,70.0,42.5,-67,8.1,116.4183,39.9245,0.13,-0.09,0.06,正常
2025-06-15 14:50:00,BUPT-1,12.5,15.2,45.5,68.9,42.1,-65,8.4,116.4194,39.9253,0.16,-0.08,0.04,正常
2025-06-15 14:51:00,BUPT-1,12.4,15.1,45.9,69.0,42.3,-66,8.3,116.4205,39.9261,0.15,-0.08,0.04,正常
2025-06-15 14:52:00,BUPT-1,12.6,15.3,44.8,67.3,41.8,-64,8.7,116.4216,39.9269,0.20,-0.06,0.03,正常
2025-06-15 14:53:00,BUPT-1,12.3,15.0,46.3,70.4,42.6,-67,8.0,116.4227,39.9277,0.12,-0.10,0.06,正常
2025-06-15 14:54:00,BUPT-1,12.5,15.2,45.4,68.7,42.1,-65,8.4,116.4238,39.9285,0.16,-0.08,0.04,正常
2025-06-15 14:55:00,BUPT-1,12.2,14.9,46.6,71.2,42.7,-68,7.9,116.4249,39.9293,0.11,-0.11,0.07,异常`;

const floatButtonToken = {
  colorBgElevated: 'rgba(24, 73, 110, 0.47)',
  colorFillContent: 'rgba(24, 73, 110, 0.47)',
  colorText: 'aliceblue',
  colorPrimary: 'rgba(24, 73, 110)'
};

const tableToken = {
  bodySortBg: 'transparent',
  rowHoverBg: 'rgba(24, 144, 255, 0.1)',
  rowSelectedBg: 'rgba(0, 0, 0, 0.3)',
  headerBorderRadius: '0',
  headerBg: 'rgba(24, 144, 255, 0.2)',
  headerColor: 'aliceblue',
  colorText: 'aliceblue',
  colorBgContainer: 'transparent',
  borderColor: 'rgba(126, 156, 179, 0.3)'
};

const stateMap = {
  uploading: '上传中',
  validate: '检验中',
  compress: '压缩中',
  evaluate: '验证中',
  ready: '就绪'
};

const columns = (showUploadModal, navigate, showModelModal, handleUploadWithStatus) => [
  {
    title: '模型ID',
    dataIndex: 'model_id',
    render: (text, record) => (
      <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} >
        <FileTextOutlined style={{ width: '20px', height: '20px', marginRight: '8px' }} />
        <a onClick={() => showModelModal(record.model_id)}>
          {record.model_id}
        </a>
      </div>
    ),
  },
  {
    title: '状态',
    dataIndex: 'state',
    render: (text, record) => (
      <div style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }} onClick={handleUploadWithStatus}>
        <Badge
          status={record.state === 'ready' ? 'success' : 'processing'}
          text={stateMap[record.state]}
          style={{ color: 'aliceblue' }}
        />
      </div>
    ),
  }
];

const pagination = false;

const satelliteListData = [
  {
    title: '北邮一号',
    description: '天算星座主星，天算星座的空天计算在轨试验开放开源平台的核心节点。'
  },
  {
    title: '北邮二号',
    description: '北京邮电大学牵头，联合长沙天仪研究院有限公司研制的天算星座二期首批卫星。'
  },
  {
    title: '北邮三号',
    description: '北京邮电大学牵头，联合长沙天仪研究院有限公司研制的天算星座二期首批卫星。'
  },
  {
    title: '天仪33号',
    description: '天仪研究院与湖南科技大学联合研制的卫星，2023年12月9日07时39分，在酒泉卫星发射中心由朱雀二号遥三运载火箭发射升空。'
  },
  {
    title: '丽泽一号',
    description: '2021年12月7日12时12分在酒泉卫星发射中心发射。'
  },
  {
    title: '宝酝号',
    description: '天算一号，全球首颗具备云原生与边缘计算能力的智能卫星。全球首次实现5G软基站在轨部署，并开展软基站与5G核心网的在轨互联互通。'
  },
  {
    title: '创星雷神号',
    description: '天算二号，星地融合网络服务平台，全球首次QUIC协议在轨试验验证。'
  },
  {
    title: '元光号',
    description: '空间科学实验卫星，2020年搭载长征八号运载火箭升空。'
  },
  {
    title: '北邮二号',
    description: '计划中。'
  }
]

// 修改模型列表数据为固定数据
const fixedModelsData = [
  {
    key: 'resnet50',
    model_id: 'resnet50',
    name: 'ResNet50',
    location: 'Remote',
    type: '图像分类',
    attribute: '深度残差网络，50层结构，广泛用于图像分类任务',
    state: 'ready',
  },
  {
    key: 'YOLO',
    model_id: 'YOLO',
    name: 'YOLO',
    location: 'Remote',
    type: '目标检测',
    attribute: '快速目标检测，兼顾速度与精度。',
    state: 'ready',
  },
  {
    key: 'aconvnet',
    model_id: 'AConvNet',
    name: 'AConvNet',
    location: 'Remote',
    type: '雷达识别',
    attribute: '自适应卷积网络，专用于雷达信号识别和处理',
    state: 'ready',
  },
  {
    key: 'siamese_unet',
    model_id: 'Siamese U-Net',
    name: 'Siamese U-Net',
    location: 'Remote',
    type: '变化检测',
    attribute: '基于孪生网络的U-Net架构，用于遥感影像变化检测',
    state: 'ready',
  },
  {
    key: 'cloudnet',
    model_id: 'Cloud-Net',
    name: 'Cloud-Net',
    location: 'Remote',
    type: '云检测',
    attribute: '专门用于卫星影像云层检测的深度学习模型',
    state: 'ready',
  },
  {
    key: 'social_lstm',
    model_id: 'Social-LSTM',
    name: 'Social-LSTM',
    location: 'Remote',
    type: '导航识别',
    attribute: '社交感知的LSTM网络，用于轨迹预测和导航识别',
    state: 'ready',
  },
  {
    key: 'faster_rcnn',
    model_id: 'Faster R-CNN',
    name: 'Faster R-CNN',
    location: 'Remote',
    type: '目标检测',
    attribute: '两阶段目标检测网络，高精度目标定位和识别',
    state: 'ready',
  },
  {
    key: 'unet',
    model_id: 'Unet',
    name: 'U-Net',
    location: 'Remote',
    type: '图像分割',
    attribute: 'U型卷积神经网络，广泛应用于医学图像和遥感图像分割',
    state: 'ready',
  },
  {
    key: 'srcnn',
    model_id: 'SRCNN',
    name: 'SRCNN',
    location: 'Remote',
    type: '图像超分辨率重建',
    attribute: '超分辨率卷积神经网络，用于图像质量增强和重建',
    state: 'ready',
  }
];

let modelListData = fixedModelsData.map(item => ({
  title: item.model_id,
  description: item.attribute,
}));

function App() {
  const alertMessages = [
    { "message": "告警信息", "type": "检测到变化", "position": "E: 119.621  N: 20.433", "time": "2024. 9. 11", "alert_sat": "Test-1", "near_sat": "BUPT-1", "model": "CWSAM", "src": "src/image/alarm.png" },
    { "message": "告警信息", "type": "检测到变化", "position": "E: 119.6  N: 20.4", "time": "2024. 11. 11", "alert_sat": "Test-2", "near_sat": "BUPT-1", "model": "CWSAM", "src": "src/image/alarm2.png" },
    { "message": "告警信息", "type": "检测到变化", "position": "E: 119.62  N: 20.43", "time": "2024. 5. 11", "alert_sat": "Test-3", "near_sat": "BUPT-1", "model": "CWSAM", "src": "src/image/alarm3.png" },
  ];

  const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
  const [currentModelName, setCurrentModelName] = useState('');
  const [selectedSatellite, setSelectedSatellite] = useState(null);
  const [satelliteModel, setSatelliteModel] = useState([]);
  const [selectedModel, setSelectedModel] = useState(null);
  const [gettedData, setGettedData] = useState({});
  const [gpsValue, setGpsValue] = useState('');
  const [activeKeys, setActiveKeys] = useState([]);
  const [satelliteItems, setSatelliteItems] = useState([]);
  const [modelItems, setModelItems] = useState([]);
  const [currentTime, setCurrentTime] = useState('');
  const [modelsData, setModelsData] = useState(fixedModelsData); // 使用固定数据
  const [isModelModalOpen, setIsModelModalOpen] = useState(false);
  const [selectedModelId, setSelectedModelId] = useState(null);
  const [isNewUploadModalOpen, setIsNewUploadModalOpen] = useState(false);
  const [isDenoiseModelOpen, setIsDenoiseModelOpen] = useState(false);  // 控制数据去噪弹窗
  const [isDisplayRecall, setDisplayRecall] = useState(false);  // 控制质量评估弹窗
  const [loadingSatellite, setLoadingSatellite] = useState(true);
  const [loadingModel, setLoadingModel] = useState(true);
  const [readyModelsData, setReadyModelsData] = useState([]);
  const [isHide, setIsHide] = useState(true);

  const [isAlertModalOpen, setIsAlertModalOpen] = useState(false);
  const [allModalsOpen, setAllModalsOpen] = useState(false);
  const [allDataOpen, setAllDataOpen] = useState(false);
  const [isAlertModalOpen1, setIsAlertModalOpen1] = useState(
    Array(alertMessages.length).fill(false)
  );

  const [spinning, setSpinning] = React.useState(false);
  const [percent, setPercent] = React.useState(0);

  const navigate = useNavigate();

  // 新增：处理日志数据的state
  const [processedLogData, setProcessedLogData] = useState(null);
  const [processedOBDData, setProcessedOBDData] = useState(null);

  // 新增：处理日志数据的函数
  useEffect(() => {
    const parseLogData = (logContent) => {
      const lines = logContent.split('\n');
      const sessions = [];
      let currentSession = null;

      lines.forEach(line => {
        if (line.includes('ResNet推理开始时间:') || line.includes('YOLO推理开始时间:')) {
          const model = line.includes('ResNet') ? 'ResNet' : 'YOLO';
          const timestamp = parseFloat(line.split(':')[1]);
          currentSession = {
            model,
            startTime: timestamp,
            startTimeFormatted: new Date(timestamp * 1000).toLocaleString(),
            images: [],
            endTime: null,
            duration: null
          };
        } else if (line.includes('推理结束时间:')) {
          if (currentSession) {
            const timestamp = parseFloat(line.split(':')[1]);
            currentSession.endTime = timestamp;
            currentSession.endTimeFormatted = new Date(timestamp * 1000).toLocaleString();
            currentSession.duration = (timestamp - currentSession.startTime).toFixed(2);
            sessions.push(currentSession);
            currentSession = null;
          }
        } else if (line.includes('照片:') && line.includes('执行结束') && currentSession) {
          const imageName = line.split(':')[1].split('执行结束')[0].trim();
          currentSession.images.push(imageName);
        }
      });

      return sessions;
    };

    const parseOBDData = (obdContent) => {
      const lines = obdContent.split('\n');
      const data = [];
      const headers = lines[0].split(',');

      for (let i = 1; i < lines.length; i++) {
        if (lines[i].trim()) {
          const values = lines[i].split(',');
          const record = {};
          headers.forEach((header, index) => {
            record[header] = values[index];
          });
          data.push(record);
        }
      }

      // 统计分析
      const normalCount = data.filter(item => item['状态'] === '正常').length;
      const abnormalCount = data.filter(item => item['状态'] === '异常').length;
      const avgBatteryVoltage = data.reduce((sum, item) => sum + parseFloat(item['电池电压(V)']), 0) / data.length;
      const avgCPUTemp = data.reduce((sum, item) => sum + parseFloat(item['CPU温度(°C)']), 0) / data.length;
      const avgMemoryUsage = data.reduce((sum, item) => sum + parseFloat(item['内存使用率(%)']), 0) / data.length;

      return {
        data,
        statistics: {
          totalRecords: data.length,
          normalCount,
          abnormalCount,
          avgBatteryVoltage: avgBatteryVoltage.toFixed(2),
          avgCPUTemp: avgCPUTemp.toFixed(1),
          avgMemoryUsage: avgMemoryUsage.toFixed(1),
          healthRate: ((normalCount / data.length) * 100).toFixed(1)
        }
      };
    };

    const sessions = parseLogData(FULL_LOG_CONTENT);
    const obdAnalysis = parseOBDData(OBD_TELEMETRY_DATA);

    const allImages = [...new Set(sessions.flatMap(s => s.images))];

    setProcessedLogData({
      sessions,
      totalImages: allImages.length,
      totalSessions: sessions.length,
      avgDuration: sessions.length > 0 ? (sessions.reduce((sum, s) => sum + parseFloat(s.duration), 0) / sessions.length).toFixed(2) : '0'
    });

    setProcessedOBDData(obdAnalysis);
  }, []);

  // 新增：下载日志的函数
  const downloadLog = () => {
    const blob = new Blob([FULL_LOG_CONTENT], { type: 'text/plain;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = `satellite_inference_log_${new Date().toISOString().split('T')[0]}.txt`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  };

  // 新增：下载OBD数据的函数
  const downloadOBDData = () => {
    const blob = new Blob([OBD_TELEMETRY_DATA], { type: 'text/plain;charset=utf-8' });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = `OBD_telemetry_data_${new Date().toISOString().split('T')[0]}.csv`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  };

  // 修改后的DataCarousel组件
  function DataCarousel() {
    if (!processedLogData || !processedOBDData) return <div>Loading...</div>;

    const obdColumns = [
      {
        title: '时间',
        dataIndex: '时间',
        key: 'time',
        render: (text) => <span style={{ color: 'aliceblue', fontSize: '14px', fontWeight: '500' }}>{text}</span>
      },
      {
        title: '电池电压(V)',
        dataIndex: '电池电压(V)',
        key: 'battery',
        render: (text) => <span style={{ color: 'aliceblue', fontSize: '14px', fontWeight: '500' }}>{text}</span>
      },
      {
        title: 'CPU温度(°C)',
        dataIndex: 'CPU温度(°C)',
        key: 'cpu_temp',
        render: (text) => <span style={{ color: 'aliceblue', fontSize: '14px', fontWeight: '500' }}>{text}</span>
      },
      {
        title: '内存使用率(%)',
        dataIndex: '内存使用率(%)',
        key: 'memory',
        render: (text) => <span style={{ color: 'aliceblue', fontSize: '14px', fontWeight: '500' }}>{text}</span>
      },
      {
        title: '状态',
        dataIndex: '状态',
        key: 'status',
        render: (text) => (
          <Badge
            status={text === '正常' ? 'success' : 'error'}
            text={<span style={{ color: 'aliceblue', fontSize: '14px', fontWeight: '500' }}>{text}</span>}
          />
        )
      }
    ];

    return (
      <Modal
        style={{
          zIndex: '1500',
          minWidth: '1400px',
          minHeight: '800px',
          maxHeight: '90vh',
          width: '1400px',
          backgroundColor: 'rgba(16, 58, 91, 0.95)',
          border: '1px solid rgba(126, 156, 179, 0.8)',
          padding: '0'
        }}
        open={allDataOpen}
        onClose={handleCloseData}
        onCancel={handleCloseData}
        footer={null}
        className='satellite-data-modal'
      >
        <div style={{ padding: '24px', background: 'rgba(16, 58, 91, 0.95)', minHeight: '750px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
            <Title level={2} style={{ color: 'aliceblue', margin: 0, display: 'flex', alignItems: 'center' }}>
              <RocketOutlined style={{ marginRight: '12px', color: '#1890ff' }} />
              星上下传信息获取
            </Title>
            <Space>
              <Button
                type="primary"
                icon={<DownloadOutlined />}
                onClick={downloadLog}
                style={{
                  background: 'linear-gradient(135deg, #1890ff 0%, #722ed1 100%)',
                  border: 'none',
                  height: '40px',
                  paddingLeft: '20px',
                  paddingRight: '20px',
                  fontSize: '14px',
                  fontWeight: 'bold'
                }}
              >
                下载推理日志
              </Button>
              <Button
                type="primary"
                icon={<DownloadOutlined />}
                onClick={downloadOBDData}
                style={{
                  background: 'linear-gradient(135deg, #52c41a 0%, #1890ff 100%)',
                  border: 'none',
                  height: '40px',
                  paddingLeft: '20px',
                  paddingRight: '20px',
                  fontSize: '14px',
                  fontWeight: 'bold'
                }}
              >
                下载OBD数据
              </Button>
            </Space>
          </div>

          <Row gutter={[24, 24]}>
            {/* 推理统计卡片 */}
            <Col span={12}>
              <Row gutter={[16, 16]}>
                <Col span={12}>
                  <Card
                    style={{
                      background: 'linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(114, 46, 209, 0.1) 100%)',
                      border: '1px solid rgba(126, 156, 179, 0.3)',
                      borderRadius: '12px'
                    }}
                  >
                    <Statistic
                      title={<span style={{ color: 'aliceblue', fontSize: '14px' }}>推理会话数</span>}
                      value={processedLogData.totalSessions}
                      prefix={<PlayCircleOutlined style={{ color: '#1890ff' }} />}
                      valueStyle={{ color: '#1890ff', fontSize: '24px', fontWeight: 'bold' }}
                    />
                  </Card>
                </Col>
                <Col span={12}>
                  <Card
                    style={{
                      background: 'linear-gradient(135deg, rgba(82, 196, 26, 0.1) 0%, rgba(24, 144, 255, 0.1) 100%)',
                      border: '1px solid rgba(126, 156, 179, 0.3)',
                      borderRadius: '12px'
                    }}
                  >
                    <Statistic
                      title={<span style={{ color: 'aliceblue', fontSize: '14px' }}>处理图片数</span>}
                      value={processedLogData.totalImages}
                      prefix={<EyeOutlined style={{ color: '#52c41a' }} />}
                      valueStyle={{ color: '#52c41a', fontSize: '24px', fontWeight: 'bold' }}
                    />
                  </Card>
                </Col>
              </Row>
            </Col>

            {/* OBD统计卡片 */}
            <Col span={12}>
              <Row gutter={[16, 16]}>
                <Col span={12}>
                  <Card
                    style={{
                      background: 'linear-gradient(135deg, rgba(250, 173, 20, 0.1) 0%, rgba(82, 196, 26, 0.1) 100%)',
                      border: '1px solid rgba(126, 156, 179, 0.3)',
                      borderRadius: '12px'
                    }}
                  >
                    <Statistic
                      title={<span style={{ color: 'aliceblue', fontSize: '14px' }}>系统健康率</span>}
                      value={processedOBDData.statistics.healthRate}
                      suffix={<span style={{ color: 'aliceblue', fontSize: '16px' }}>%</span>}
                      prefix={<CheckCircleOutlined style={{ color: '#faad14' }} />}
                      valueStyle={{ color: '#faad14', fontSize: '24px', fontWeight: 'bold' }}
                    />
                  </Card>
                </Col>
                <Col span={12}>
                  <Card
                    style={{
                      background: 'linear-gradient(135deg, rgba(114, 46, 209, 0.1) 0%, rgba(250, 173, 20, 0.1) 100%)',
                      border: '1px solid rgba(126, 156, 179, 0.3)',
                      borderRadius: '12px'
                    }}
                  >
                    <Statistic
                      title={<span style={{ color: 'aliceblue', fontSize: '14px' }}>遥测记录数</span>}
                      value={processedOBDData.statistics.totalRecords}
                      prefix={<ClockCircleOutlined style={{ color: '#722ed1' }} />}
                      valueStyle={{ color: '#722ed1', fontSize: '24px', fontWeight: 'bold' }}
                    />
                  </Card>
                </Col>
              </Row>
            </Col>

            {/* 详细信息选项卡 */}
            <Col span={24}>
              <Card
                style={{
                  background: 'rgba(16, 58, 91, 0.6)',
                  border: '1px solid rgba(126, 156, 179, 0.3)',
                  borderRadius: '12px'
                }}
              >
                <Tabs defaultActiveKey="inference" style={{ color: 'aliceblue' }}>
                  <TabPane tab={<span style={{ color: 'aliceblue' }}>推理过程时间线</span>} key="inference">
                    <div style={{ padding: '20px', maxHeight: '400px', overflow: 'auto' }}>
                      <Timeline mode="left">
                        {processedLogData.sessions.map((session, index) => (
                          <Timeline.Item
                            key={index}
                            color={session.model === 'ResNet' ? '#1890ff' : '#52c41a'}
                            label={
                              <span style={{ color: 'aliceblue', fontSize: '12px' }}>
                                {session.startTimeFormatted}
                              </span>
                            }
                          >
                            <div style={{ color: 'aliceblue' }}>
                              <Text strong style={{ color: session.model === 'ResNet' ? '#1890ff' : '#52c41a' }}>
                                {session.model} 推理
                              </Text>
                              <br />
                              <Text style={{ color: 'rgba(255, 255, 255, 0.7)' }}>
                                处理 {session.images.length} 张图片，耗时 {session.duration} 秒
                              </Text>
                            </div>
                          </Timeline.Item>
                        ))}
                      </Timeline>
                    </div>
                  </TabPane>

                  <TabPane tab={<span style={{ color: 'aliceblue' }}>OBD遥测数据</span>} key="obd">
                    <div style={{ padding: '20px 0' }}>
                      <Row gutter={[16, 16]} style={{ marginBottom: '20px' }}>
                        <Col span={6}>
                          <Card style={{ background: 'rgba(24, 144, 255, 0.1)', border: '1px solid rgba(126, 156, 179, 0.3)', textAlign: 'center' }}>
                            <Text style={{ color: 'aliceblue', fontSize: '12px' }}>平均电池电压</Text>
                            <br />
                            <Text style={{ color: '#1890ff', fontSize: '18px', fontWeight: 'bold' }}>
                              {processedOBDData.statistics.avgBatteryVoltage}V
                            </Text>
                          </Card>
                        </Col>
                        <Col span={6}>
                          <Card style={{ background: 'rgba(82, 196, 26, 0.1)', border: '1px solid rgba(126, 156, 179, 0.3)', textAlign: 'center' }}>
                            <Text style={{ color: 'aliceblue', fontSize: '12px' }}>平均CPU温度</Text>
                            <br />
                            <Text style={{ color: '#52c41a', fontSize: '18px', fontWeight: 'bold' }}>
                              {processedOBDData.statistics.avgCPUTemp}°C
                            </Text>
                          </Card>
                        </Col>
                        <Col span={6}>
                          <Card style={{ background: 'rgba(250, 173, 20, 0.1)', border: '1px solid rgba(126, 156, 179, 0.3)', textAlign: 'center' }}>
                            <Text style={{ color: 'aliceblue', fontSize: '12px' }}>平均内存使用率</Text>
                            <br />
                            <Text style={{ color: '#faad14', fontSize: '18px', fontWeight: 'bold' }}>
                              {processedOBDData.statistics.avgMemoryUsage}%
                            </Text>
                          </Card>
                        </Col>
                        <Col span={6}>
                          <Card style={{ background: 'rgba(114, 46, 209, 0.1)', border: '1px solid rgba(126, 156, 179, 0.3)', textAlign: 'center' }}>
                            <Text style={{ color: 'aliceblue', fontSize: '12px' }}>异常记录数</Text>
                            <br />
                            <Text style={{ color: '#722ed1', fontSize: '18px', fontWeight: 'bold' }}>
                              {processedOBDData.statistics.abnormalCount}
                            </Text>
                          </Card>
                        </Col>
                      </Row>
                      <ConfigProvider
                        theme={{
                          components: {
                            Table: {
                              colorBgContainer: 'transparent',
                              colorText: 'aliceblue',
                              colorTextHeading: 'aliceblue',
                              headerBg: 'rgba(24, 144, 255, 0.2)',
                              headerColor: 'aliceblue',
                              borderColor: 'rgba(126, 156, 179, 0.3)',
                              rowHoverBg: 'rgba(24, 144, 255, 0.1)',
                              colorBorder: 'rgba(126, 156, 179, 0.3)'
                            }
                          }
                        }}
                      >
                        <Table
                          columns={obdColumns}
                          dataSource={processedOBDData.data.map((item, index) => ({
                            ...item,
                            key: index
                          }))}
                          pagination={{
                            pageSize: 8,
                            showSizeChanger: false,
                            showQuickJumper: true,
                            showTotal: (total, range) =>
                              <span style={{ color: 'aliceblue' }}>
                                {`显示 ${range[0]}-${range[1]} 共 ${total} 条`}
                              </span>
                          }}
                          style={{
                            background: 'transparent',
                            maxHeight: '300px',
                            overflow: 'auto'
                          }}
                        />
                      </ConfigProvider>
                    </div>
                  </TabPane>
                </Tabs>
              </Card>
            </Col>
          </Row>

          <div style={{ borderTop: '1px solid rgba(126, 156, 179, 0.3)', paddingTop: '24px', marginTop: '24px' }}>
            <div style={{ textAlign: 'center' }}>
              <Space size="large">
                <Button
                  type="primary"
                  size="large"
                  onClick={handleCloseData}
                  style={{
                    background: 'linear-gradient(135deg, #52c41a 0%, #1890ff 100%)',
                    border: 'none',
                    minWidth: '120px',
                    height: '45px',
                    fontSize: '16px',
                    fontWeight: 'bold'
                  }}
                >
                  确认查看
                </Button>
                <Button
                  ghost
                  danger
                  size="large"
                  onClick={handleCloseData}
                  style={{
                    minWidth: '120px',
                    height: '45px',
                    fontSize: '16px',
                    fontWeight: 'bold'
                  }}
                >
                  关闭
                </Button>
              </Space>
            </div>
          </div>
        </div>
      </Modal>
    );
  }

  function AlertCarousel() {
    return (
      <>
        {allModalsOpen && (
          <>
            {alertMessages.map((data, index) => (
              <Modal key={index}
                style={{
                  zIndex: '1500',
                  minWidth: '1200px',
                  minHeight: '700px',
                  maxHeight: '700px',
                  width: '1200px',
                  backgroundColor: 'rgba(16, 58, 91, 0.85)',
                  border: '1px solid rgba(126, 156, 179, 0.8)', padding: '0'
                }}
                open={isAlertModalOpen1[index]}
                onClose={() => handleCloseModal(index)}
                onCancel={() => handleCloseModal(index)}
                className='new-upload-modal'
              >
                <Row gutter={16}>
                  <Col span={8}>
                    <p style={{
                      fontSize: '24px',
                      fontWeight: 'bolder',
                      paddingLeft: '100px',
                      paddingTop: '0'
                    }}>{data.message}</p>
                    <div style={{ paddingLeft: '40px' }} className='description'>
                      <ConfigProvider theme={descriptionsToken}>
                        <Descriptions labelStyle={{ color: 'aliceblue', fontSize: '18px', fontWeight: 'bolder' }}
                          column={1} layout='vertical'>
                          <Descriptions.Item label='告警类型' contentStyle={{
                            color: 'aliceblue',
                            paddingLeft: '40px',
                            fontSize: '16px'
                          }}>{data.type}</Descriptions.Item>
                          <Descriptions.Item label='位置' contentStyle={{
                            color: 'aliceblue',
                            paddingLeft: '40px',
                            fontSize: '16px'
                          }}>{data.position}</Descriptions.Item>
                          <Descriptions.Item label='发生时间' contentStyle={{
                            color: 'aliceblue',
                            paddingLeft: '40px',
                            fontSize: '16px'
                          }}>{data.time}</Descriptions.Item>
                          <Descriptions.Item label='告警卫星' contentStyle={{
                            color: 'aliceblue',
                            paddingLeft: '40px',
                            fontSize: '16px'
                          }}>{data.alert_sat}</Descriptions.Item>
                          <Descriptions.Item label='最近卫星' contentStyle={{
                            color: 'aliceblue',
                            paddingLeft: '40px',
                            fontSize: '16px'
                          }}>{data.near_sat}</Descriptions.Item>
                          <Descriptions.Item label='使用模型' contentStyle={{
                            color: 'aliceblue',
                            paddingLeft: '40px',
                            fontSize: '16px'
                          }}>{data.model}</Descriptions.Item>
                        </Descriptions>
                      </ConfigProvider>
                    </div>
                  </Col>
                  <Col span={12}>
                    <p style={{ color: 'aliceblue', fontSize: '18px', fontWeight: 'bolder' }}>告警图片</p>
                    <Image src={data.src} width={700} style={{ padding: '0', margin: '0' }} />
                    <Space style={{ marginTop: '100px', paddingLeft: '150px' }}>
                      <Button type='primary' style={{ width: '200px', height: '40px', fontSize: '16px' }}
                        onClick={() => handleCloseModal(index)}>确<p />认</Button>
                      <Button ghost danger style={{ width: '200px', height: '40px', fontSize: '16px' }}
                        onClick={() => handleCloseModal(index)}>拒<p />绝</Button>
                    </Space>
                  </Col>
                </Row>
                <br /><br />
                <div style={{ display: "flex", justifyContent: "space-between", padding: "0 20px" }}>
                  <Button ghost type="primary" style={{ width: "100px", height: "20px", fontSize: "16px" }}
                    onClick={() => handleFront(index)}>
                    上一页
                  </Button>

                  <Button ghost type="primary" style={{ width: "100px", height: "20px", fontSize: "16px" }}
                    onClick={() => handleBack(index)}>
                    下一页
                  </Button>
                </div>
              </Modal>
            ))}
          </>
        )}
      </>
    );
  }

  useEffect(() => {
    const items = satelliteData.map((satellite, index) => ({
      key: `${index + 1}`,
      label: satellite.name,
      children: (
        <ul className='content'>
          <li>国家: {satellite.country}</li>
          <li>发射日期: {satellite.launchDate}</li>
          <li>重量: {satellite.weight}</li>
        </ul>
      ),
    }));
    setSatelliteItems(items);
  }, []);

  useEffect(() => {
    const updateTime = () => {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const year = now.getFullYear();
      setCurrentTime(`${hours}:${minutes}      ${month}/${day}/${year}`);
    };

    updateTime();
    const interval = setInterval(updateTime, 1000); // Update every second

    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    window.CESIUM_BASE_URL = '/Cesium';
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1MmQyNmNlMS1hNDQ5LTRiMmItYjY2OC1lMGFlMDk3ZTI4ZmUiLCJpZCI6MjMyNjUyLCJpYXQiOjE3MjI4NDk1Njh9.Hy3Yrn5GN8jZY1SOqfTiyLxP-uwlY2pLISrFIlEY0vk';

    setTimeout(() => {
      const viewer = new Viewer('cesiumContainer', {
        creditContainer: document.createElement('div'),
        animation: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        selectionIndicator: false,
      });

      viewer.scene.globe.depthTestAgainstTerrain = true;

      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(104.1954, 35.8617, 15000000)
      });

      // 加载CZML数据源并添加到viewer
      Cesium.CzmlDataSource.load('test.czml').then(dataSource => {
        console.log('CZML DataSource loaded:', dataSource);
        viewer.dataSources.add(dataSource);

        // 添加卫星模型
        viewer.entities.add({
          name: 'Satellite',
          position: new Cesium.CallbackProperty(() => {
            const satellitePosition = dataSource.entities.values[0].position.getValue(viewer.clock.currentTime);
            return satellitePosition;
          }, false),
          model: {
            uri: 'satellite.glb',
            minimumPixelSize: 100,
            maximumScale: 4000,
            scale: 500
          }
        });

        const islands = [
          { name: '天算华东站', longitude: 121.39, latitude: 37.52 },
          { name: '北京', longitude: 116.2, latitude: 39.54 },
          { name: '黑河站', longitude: 127.53, latitude: 50.22 },
          { name: '长沙站', longitude: 112.59, latitude: 28.12 },
          { name: '天算华南站', longitude: 109.45, latitude: 24.18 },
          { name: '酒泉站', longitude: 98.5, latitude: 39.71 },
          { name: '库尔勒站', longitude: 86.17, latitude: 41.72 }
        ];

        islands.forEach(island => {
          viewer.entities.add({
            name: island.name,
            position: Cesium.Cartesian3.fromDegrees(island.longitude, island.latitude),
            rectangle: {
              coordinates: Cesium.Rectangle.fromDegrees(island.longitude - 0.3, island.latitude - 0.3, island.longitude + 0.3, island.latitude + 0.3),
              material: Cesium.Color.YELLOW.withAlpha(0.5),
              outline: true,
              outlineColor: Cesium.Color.YELLOW
            },
            label: {
              text: island.name,
              font: '14pt sans-serif',
              fillColor: Cesium.Color.YELLOW.withAlpha(0.5),
              outlineColor: Cesium.Color.YELLOW.withAlpha(0.5),
              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              pixelOffset: new Cesium.Cartesian2(0, 0),
              distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 2000000.0),
              zIndex: 1000
            }
          });
        });


      }).catch(error => {
        console.error('Error loading CZML DataSource:', error);
      });
      viewer.clock.shouldAnimate = true;
    },); // 延迟1秒初始化Cesium Viewer
  }, []);

  // 移除原有的数据获取useEffect，因为我们现在使用固定数据
  // useEffect(() => {
  //   const fetchData = async () => {
  //     try {
  //       const res = await axios.get('http://39.106.250.42:5172/get_model');
  //       const data = res.data;
  //       if (Array.isArray(data)) {
  //         setModelsData(data.map(item => ({
  //           key: item.model_id,
  //           model_id: item.model_id,
  //           name: item.name,
  //           location: item.location,
  //           type: item.type,
  //           attribute: item.attribute,
  //           state: item.state,
  //         })));
  //         modelListData = data.map(item => ({
  //           title: item.model_id,
  //           description: item.attribute,
  //         }));
  //       } else {
  //         console.error('Data is not an array:', data);
  //       }
  //     } catch (err) {
  //       console.error(err);
  //     }
  //   };

  //   fetchData();
  // }, []);

  const showUploadModal = (name) => {
    setCurrentModelName(name);
    setIsUploadModalOpen(true);
  };

  const handleUploadOk = () => {
    setIsUploadModalOpen(false);
  };

  const handleUploadCancel = () => {
    setIsUploadModalOpen(false);
  };

  const handleCollapseChange = async (keys) => {
    setActiveKeys(keys);
    let changeKey;
    if (keys.length > activeKeys.length)
      changeKey = keys.filter(key => !activeKeys.includes(key))[0];
    else
      changeKey = activeKeys.filter(key => !keys.includes(key))[0];
    const satellite = satelliteData[changeKey - 1]["name"];
    let model;
    if (satelliteModel.includes(satellite)) {
      model = gettedData[satellite];
    } else {
      // 使用固定的模型数据而不是请求后端
      model = fixedModelsData.map(item => ({
        model: item.model_id,
        state: item.state
      }));
      setSatelliteModel([...satelliteModel, satellite]);
      setGettedData(prevData => ({
        ...prevData,
        [satellite]: model,
      }));
    }
    const filteredReadyModels = modelsData.filter(readyModel =>
      model.some(dataItem => dataItem.model === readyModel.model_id)
    );
    setReadyModelsData(filteredReadyModels);
    setIsHide(false);
  };

  const collapseAll = () => {
    setActiveKeys([]);
  };

  const handleUploadClick = () => {
    navigate('/manage');
  };

  const showNewUploadModal = () => {
    setIsNewUploadModalOpen(true);
  }

  const jumpToBigdataPlatform = () => {
    window.location.href = 'http://127.0.0.1:8000/';  // 设置页面跳转的URL
  };

  // 数据去噪涉及函数
  // 数据去噪处理函数
  const handleDenoisePlatform = () => {
    setIsDenoiseModelOpen(true);
  }
  const handleDenoiseModelOK = () => {
    setIsDenoiseModelOpen(false);
  }

  const handleDenoiseModelCancel = () => {
    setIsDenoiseModelOpen(false);
  }
  // 去噪后图像地址
  const [denoisedImg, setdenoisedImg] = useState('src/image/afterDenoise.jpg')
  // 原图地址
  const [originalImageUrl, setOriginalImageUrl] = useState('src/image/base.jpg');
  const [originalImageFile, setOriginalImageFile] = useState(null);
  // 去噪进度条百分比
  const [denoisePersent, setDenoisePersent] = useState(0)
  const [basePersent, setBasePersent] = useState(0)
  // 当前选中的模型名称
  const [selectedModelName, setselectedModelName] = useState('ResNet')
  // 当前选中的数据集名称
  const [selectedDenoiseDatasetName, setselectedDenoiseDatasetName] = useState('南海周边数据集')
  // 开始去噪按钮
  const startDenoise = (nameModel) => {
    function sleep() {
      setTimeout(() => {
        setDenoisePersent(dataDenoisePersent[nameModel] ?? 0)  // 找不到时默认为 0
        setBasePersent(dataBasePercent[nameModel] ?? 0)
      }, 1000)
    }
    sleep()
  }
  // 图片上传区域
  const uploadImg = (file) => {
    const previewUrl = URL.createObjectURL(file);
    setOriginalImageUrl(previewUrl);
    setOriginalImageFile(file);
    setDenoisePersent(0)
    setBasePersent(0)
    return false; // 阻止默认上传行为
  }
  // 进度条数据，静态
  const dataDenoisePersent = {
    'ResNet': 85.43,
    'YOLO': 93.08
  }
  const dataBasePercent = {
    'ResNet': 81.55,
    'YOLO': 89.35
  }

  // 切换不同的进度条数据
  const changeDenoiseModel = (nameModel) => {
    setselectedModelName(nameModel)
    setDenoisePersent(0)
    setBasePersent(0)
  }
  // 切换不同的shujuji
  const changeDenoiseDataset = (datasetName) => {
    setselectedDenoiseDatasetName(datasetName)
    setDenoisePersent(0)
    setBasePersent(0)
  }
  // 数据去噪函数结束
  // 质量评估涉及函数
  // 质量评估的展示进度的文本 "基于数据质量评估的星地无效数据召回率测试 采用数据质量评估模型"
  const [displayRecallQualityAssessText, setdisplayRecallQualityAssessText] = useState('')
  // 质量评估的展示进度的文本 "基于数据质量评估的星地无效数据召回率测试 不采用数据质量评估模型"
  const [displayRecallQualityNotAssessText, setdisplayRecallQualityNotAssessText] = useState('')
  // 质量评估的进度展示
  const [displayRecallQualityAssess, setdisplayRecallQualityAssess] = useState(0)
  // 质量评估的进度展示
  const [displayRecallQualityNotAssess, setdisplayRecallQualityNotAssess] = useState(0)
  // 质量评估选中的数据集
  const [selectedDatasetName, setselectedDatasetName] = useState('FGSC23')
  const [displayRecallQualityAssessTimeCost, setdisplayRecallQualityAssessTimeCost] = useState(0)
  const handelDisplayRecallPlatform = () => {
    setDisplayRecall(true);
  }
  const handleDisplayRecallModelOK = () => {
    setDisplayRecall(false);
  }

  const handleDisplayRecallModelCancel = () => {
    setDisplayRecall(false);
  }

  // 基于数据质量评估的星地无效数据召回率测试 有质量评估
  const dataQualityAssess = {
    'FGSC23': 0.30,
    '南海周边数据集': 4.84
  }
  // 基于数据质量评估的星地无效数据召回率测试 没有质量评估
  const dataQualityNotAssess = {
    'FGSC23': 1.55,
    '南海周边数据集': 39.62
  }
  // 数据集名称
  const QualityAssessDatasetName = [
    'FGSC23', '南海周边数据集'
  ]

  // 改变选中的数据集
  const changeQualityAssessDatasetName = (datasetName) => {
    setselectedDatasetName(datasetName)
    setdisplayRecallQualityAssess(0)
    setdisplayRecallQualityNotAssess(0)
  }

  // 质量评估模拟进度
  const randomTimeStep = () => {
    let temp = [
      // 'FGSC23数据集测试',
      // 'inference_result - INFO - dataroot: ./data/',
      // 'inference_result - INFO - meta_root: ./data/',
      // 'inference_result - INFO - meta_file: FGSC_23_retrieval_noise0.pkl',
      // "inference_result - INFO - code_file: autom_id_FGSC23_3256.pkl",
      // "inference_result - INFO - dataset: FGSC-23",
      // 'inference_result - INFO - workers: 16',
      // 'inference_result - INFO - model_dir: ./results/baseAR_FGSC-23_50_50_0.0001_0',
      // 'inference_result - INFO - model_name: ar_40.pth',
      // 'inference_result - INFO - noise_rate: 0',
      // 'inference_result - INFO - scale_size: 256',
      // 'inference_result - INFO - crop_size: 224',
      // 'inference_result - INFO - batch_size: 1',
      // 'inference_result - INFO - test_batch_size: 1',
      // 'inference_result - INFO - beam_size: 50',
      // 'inference_result - INFO - name: inference_result',
      // 'inference_result - INFO - model_path: ./results/baseAR_FGSC-23_50_50_0.0001_0/ar_40.pth',
      // 'inference_result - INFO - num_labels: 23',
      // 'inference_result - INFO - Labels: 23',
      // 'inference_result - INFO - train gallery size: 3256',
      // 'inference_result - INFO - query size: 825',
      // "/home/user/experiment/test4/inference.py:266: FutureWarning: You are using `torch.load` with `weights_only=False` (the current default value), which uses the default pickle module implicitly. It is possible to construct malicious pickle data which will execute arbitrary code during unpickling (See https://github.com/pytorch/pytorch/blob/main/SECURITY.md#untrusted-models for more details). In a future release, the default value for `weights_only` will be flipped to `True`. This limits the functions that could be executed during unpickling. Arbitrary objects will no longer be allowed to be loaded via this mode unless they are explicitly allowlisted by the user via `torch.serialization.add_safe_globals`. We recommend you start setting `weights_only=True` for any use case where you don't have full control of the loaded file. Please open an issue on GitHub for any issues related to this experimental feature.",
      // 'state = torch.load(args.model_path)',
      // 'inference_result - INFO - Total parameters: 204.17M',
      // '100%|██████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████| 825/825 [02:12<00:00,  6.21it/s]',
      // 'inference_result - INFO - 在FGSC23数据集上采用数据质量评估模型后无效数据召回率:0.300199%，不采用数据质量评估无效数据召回率:1.548652%;',
      // '南海周边数据集测试',
      // 'inference_result - INFO - dataroot: ./data/',
      // 'inference_result - INFO - meta_root: ./data/',
      // 'inference_result - INFO - meta_file: SCSShip_retrieval.pkl',
      // 'inference_result - INFO - code_file: autom_id_SCSShip_253.pkl',
      // 'inference_result - INFO - dataset: SCSShip',
      // 'inference_result - INFO - workers: 16',
      // 'inference_result - INFO - model_dir: ./results/baseAR_SCSShip_45_45_0.0001_0',
      // 'inference_result - INFO - model_name: ar_45.pth',
      // 'inference_result - INFO - noise_rate: 0',
      // 'inference_result - INFO - scale_size: 256',
      // 'inference_result - INFO - crop_size: 224',
      // 'inference_result - INFO - batch_size: 1',
      // 'inference_result - INFO - test_batch_size: 1',
      // 'inference_result - INFO - beam_size: 100',
      // 'inference_result - INFO - name: inference_result',
      // 'inference_result - INFO - model_path: ./results/baseAR_SCSShip_45_45_0.0001_0/ar_45.pth',
      // 'inference_result - INFO - num_labels: 2',
      // 'inference_result - INFO - Labels: 2',
      // 'inference_result - INFO - train gallery size: 253',
      // 'inference_result - INFO - query size: 10',
      // "/home/user/experiment/test4/inference.py:266: FutureWarning: You are using `torch.load` with `weights_only=False` (the current default value), which uses the default pickle module implicitly. It is possible to construct malicious pickle data which will execute arbitrary code during unpickling (See https://github.com/pytorch/pytorch/blob/main/SECURITY.md#untrusted-models for more details). In a future release, the default value for `weights_only` will be flipped to `True`. This limits the functions that could be executed during unpickling. Arbitrary objects will no longer be allowed to be loaded via this mode unless they are explicitly allowlisted by the user via `torch.serialization.add_safe_globals`. We recommend you start setting `weights_only=True` for any use case where you don't have full control of the loaded file. Please open an issue on GitHub for any issues related to this experimental feature.",
      // "state = torch.load(args.model_path)",
      // 'inference_result - INFO - Total parameters: 199.56M',
      // '100%|████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████████| 10/10 [00:02<00:00,  3.56it/s]',
      // 'inference_result - INFO - 在南海周边数据集上评估数据质量评估模型，采用质量评估模型无效数据召回率:4.842767%，不采用数据质量评估无效数据召回率:39.622642%。',
      '采用质量评估无效数据召回率'
    ]
    let i = 0
    function onestep() {
      setdisplayRecallQualityAssessText(temp[i])
      i++;
      if (i < temp.length) {
        setTimeout(onestep, Math.random() * 1000);
      } else {
        setdisplayRecallQualityAssess(dataQualityAssess[selectedDatasetName])
        setdisplayRecallQualityAssessTimeCost(87.78)
      }
    }
    onestep()
  }

  // 质量评估按钮
  const startQualityAssess = () => {
    setdisplayRecallQualityAssessTimeCost(0)
    randomTimeStep()
    // 暂停0-1秒
    function sleepsecond() {
      setTimeout(() => {
        setdisplayRecallQualityNotAssessText('不采用质量评估无效数据召回率')
        setdisplayRecallQualityNotAssess(dataQualityNotAssess[selectedDatasetName])
      }, 1000)
    }
    sleepsecond()
  }

  const [isModelUpdateOpen, setisModelUpdateOpen] = useState(false)
  const [modelUpdateSelectedModel, setmodelUpdateSelectedModel] = useState('ResNet')
  const [modelUpdateSelectedMethod, setmodelUpdateSelectedMethod] = useState('基于局部参数的迁移学习策略')
  const modelUpdateMethod = [
    '基于局部参数的迁移学习策略',
    '基于小样本的在轨模型偏置修正方法'
  ]

  // 模型更新
  const handleModelUpdatePlatform = () => {
    setisModelUpdateOpen(true)
  }
  const handleModelUpdateModelOK = () => {
    setisModelUpdateOpen(false)
  }
  const handleModelUpdateModelCancel = () => {
    setisModelUpdateOpen(false)
  }

  // 更改模型
  const changeModelUpdateSelectedModel = (model) => {
    setmodelUpdateSelectedModel(model)
  }
  // 更改更新方法
  const changeModelUpdateSelectedMethod = (method) => {
    setmodelUpdateSelectedMethod(method)
  }
  // 状态管理
  const [ModelUpdateProgress, setModelUpdateProgress] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const [statusText, setStatusText] = useState("准备开始任务...");

  // 模拟的文本内容数组，后续可以替换成你自己的内容
  const textContent = [
    "开始运行",
    "开始加载模型",
    "模型加载成功",
    "开始推理",
    "| CPU: 81.1% | MEM: 521 MB |",
    "| CPU: 86.2% | MEM: 672 MB |",
    "| CPU: 89.4% | MEM: 705 MB |",
    "| CPU: 86.3% | MEM: 720 MB |",
    "| CPU: 85.5% | MEM: 759 MB |",
    "推理成功",
  ];

  // 进度更新逻辑
  useEffect(() => {
    let timer;

    if (isRunning && ModelUpdateProgress < 100) {
      timer = setInterval(() => {
        setModelUpdateProgress(prev => {
          const newProgress = prev + 1;

          // 根据进度更新文本内容
          const textIndex = Math.min(
            Math.floor((newProgress / 100) * textContent.length),
            textContent.length - 1
          );
          setStatusText(textContent[textIndex]);

          // 当进度达到100%时停止
          if (newProgress === 100) {
            setIsRunning(false);
            setStatusText("推理结束，耗时：10.63 秒")
          }

          return newProgress;
        });
      }, 200); // 每200ms更新一次
    }

    return () => clearInterval(timer);
  }, [isRunning, textContent]);

  // 控制按钮点击事件
  const handleControlClick = () => {
    if (ModelUpdateProgress === 100) {
      // 重置进度
      setModelUpdateProgress(0);
      setIsRunning(true);
    } else {
      // 切换运行状态
      setIsRunning(!isRunning);
    }
  };


  // 轻量化部署按钮
  const [displayRecallLightWeightPercent, setdisplayRecallLightWeightPercent] = useState(0)
  const [displayRecallNotLightWeightPercent, setdisplayRecallNotLightWeightPercent] = useState(0)
  const [displayRecallLightWeightText, setdisplayRecallLightWeightText] = useState('')
  const [displayRecallNotLightWeightText, setdisplayRecallNotLightWeightText] = useState('')
  const [displayRecallLightWeightTimeCost, setdisplayRecallLightWeightTimeCost] = useState(0)
  const startLightWeight = () => {
    randomTimeStepLightWeight()
    setdisplayRecallLightWeightPercent(0)
    setdisplayRecallNotLightWeightPercent(0)
    setdisplayRecallLightWeightTimeCost(0)
    // 暂停0-1秒
    function sleepsecond() {
      setTimeout(() => {
        setdisplayRecallNotLightWeightText('不采用质量评估无效数据召回率')
        setdisplayRecallNotLightWeightPercent(39.62)
      }, 1000)
    }
    sleepsecond()
  }

  // 数据质量评估模拟进度
  const randomTimeStepLightWeight = () => {
    let temp = [
      'inference result-INFO - dataroot:./data/',
      'inference result-INFO - meta root:./data/',
      // 'inference result INFO - meta file:SCSShip retrieval.pkl',
      // 'inference result-INFO - code_file:autom_id_SCSShip_253.pkl',
      'inference result INFO - dataset:SCSShip',
      'inference_result INFO - workers:16',
      'inference result-INFO - model dir.',
      // './results/baseAR_SCSShip 45 45 0.0001 0',
      // 'inference result INFO - model_name:ar_45.pth',
      // 'inference result-INFO - noise rate:0',
      // 'inference result-INFO - scale size:256',
      // 'inference_result-INFO - crop_size:224',
      // 'inference_result-INFO - batch_size:1',
      // 'inference result-INFO - test batch size:1',
      // 'inference_result-INFO - beam_size:100',
      // 'inference result-INFO - name:inference result',
      // 'inference_result INFO - model_path:',
      // './results/baseAR_SCSShip_45_45_0.0001_0/ar_45.pth',
      'inference result-INFO - num_labels:2',
      'inference result INFO - Labels:2',
      'inference_result-INFO - train gallery size:253',
      'inference_result-INFO - query size: 10',
      '采用质量评估无效数据召回率'
    ]
    let i = 0
    function onestep() {
      setdisplayRecallLightWeightText(temp[i])
      i++;
      if (i < temp.length) {
        setTimeout(onestep, Math.random() * 1000);
      } else {
        setdisplayRecallLightWeightPercent(4.84)
        setdisplayRecallLightWeightTimeCost(87.78)
      }
    }
    onestep()
  }
  // 数据传输按钮
  const [displayRecallDataTransferPercent, setdisplayRecallDataTransferPercent] = useState(0)
  const [displayRecallDataTransferText, setdisplayRecallDataTransferText] = useState('')
  const [displayRecallTimeCost, setdisplayRecallTimeCost] = useState(0)
  const startDataTransfer = () => {
    randomTimeStepDataTransfer()
    setdisplayRecallTimeCost(0)
    setdisplayRecallDataTransferPercent(0)
  }

  // 数据传输模拟进度
  const randomTimeStepDataTransfer = () => {
    let temp = [
      '成功接收算法模型与测试图像',
      '启动检索脚本start..sh',
      '加载算法配置',
      '算法配置完成',
      '读取query文件',
      'query文件读取完毕',
      '基线检索算法开始运行',
      '基线检索算法运行结束',
      '保存墓线检索结果',
      '基线检索结果保存结束',
      '质量评估算法开始运行',
      '质量评估算法运行结束',
      '保存检索结果',
      '检索结果保存结束',
      '开始计算噪声减少比例',
      'query0噪声减少比例：90.00%',
      'query1噪声减少比例：87.50%',
      'query2噪声减少比例：88.89%',
      '平均噪声减少比例：88.80%',
      '检索完成',
      '测试完成，检索结果和日志回传至地面站'
    ]
    let i = 0
    function onestep() {
      setdisplayRecallDataTransferText(temp[i])
      i++;
      if (i < temp.length) {
        setTimeout(onestep, 6 / temp.length);
      } else {
        setdisplayRecallDataTransferPercent(88.80)
        setdisplayRecallTimeCost(0.06)
      }
    }
    onestep()
  }

  const [scriptPath, setScriptPath] = useState('');

  // 控制弹出框的显示
  const showCommand = () => {
    setisCommandVisible(true);
  }

  const handleCancel = () => {
    setIsModalVisible(false);
  };


  const handleCommandCancel = () => {
    setisCommandVisible(false);
  }

  // 生成遥控指令的函数
  const generateCommands = () => {
    const randomCommand = () => {
      return 'EB900100000100000000000001000100002E000000000091000000001102000000030000EA627C6500010100000000002B010000000000000000000000000000000000000000002F686F6F6D652F757365722F6578706572696D656E742F31362F776F726B2F72756E5F7363726970742E73680000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000';
    };

    const piCommand = randomCommand(); // 生成树莓派指令
    const serverACommand = randomCommand(); // 生成太空服务器A机指令
    const serverBCommand = randomCommand(); // 生成太空服务器B机指令

    return `
      Pi:
      ${piCommand}

      太空服务器A机:
      ${serverACommand}

      太空服务器B机:
      ${serverBCommand}
    `;
  };

  // 生成txt文件并触发下载
  const downloadCommands = () => {
    const commands = generateCommands();

    const blob = new Blob([commands], { type: 'text/plain' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'remote_commands.txt';
    link.click();
  };

  const [progress, setProgress] = useState(0);  // 初始化进度状态
  const [currentStep, setCurrentStep] = useState(0);  // 当前步骤
  const [isModalVisible, setIsModalVisible] = useState(false);  // 控制模态框的显示
  const [isCommandVisible, setisCommandVisible] = useState(false);  // 输入脚本路径的显示
  const [isCompleted, setIsCompleted] = useState(false);  // 是否完成
  // 添加一个存储时间节点的状态
  const [timePoints, setTimePoints] = useState([]);

  // 步骤文本
  const steps = [
    '连接树莓派',
    '开始拍照',
    '上传太空服务器',
    '模型推理',
    '数据下传',
    '上星完成'
  ];

  // 处理按钮点击事件
  const handleNewUploadModalOK = async () => {
    setProgress(0);
    setCurrentStep(0);
    setIsModalVisible(true);
    setIsCompleted(false);
    setTimePoints([]); // 重置时间节点记录

    try {
      await axios.post('http://localhost:8000/run-transfer/');
    } catch (error) {
      console.error('Error running the transfer script:', error);
    }

    let currentProgress = 0;
    const progressInterval = setInterval(() => {
      currentProgress += 16.67;

      // 记录当前时间点
      const now = new Date();
      const timeString = now.toLocaleTimeString(); // 格式化时间为本地时间字符串
      setTimePoints(prev => [...prev, `完成于: ${timeString}`]);

      setProgress(currentProgress);
      setCurrentStep(Math.floor(currentProgress / 16.67));

      if (currentProgress >= 100) {
        clearInterval(progressInterval);
        setIsCompleted(true);
      }
    }, 3333);
  };

  const handleConfirm = () => {
    setIsModalVisible(false);  // 点击确认后，关闭模态框
  };

  const handleNewUploadModalCancel = async () => {
    setGpsValue('');
    setIsNewUploadModalOpen(false);
    setSelectedSatellite(null);
    setSelectedModel(null);
    setLoadingSatellite(true);
    setLoadingModel(true);
  }

  const handleSatelliteListClick = (name) => {
    setSelectedSatellite(name);
    setLoadingSatellite(false);
  };

  const handleModelListClick = (name) => {
    setSelectedModel(name);
    setLoadingModel(false);
  }

  const handleAlertModalOpen = () => {
    setIsAlertModalOpen(true);
  }

  const handleAlertModalClose = () => {
    setIsAlertModalOpen(false);
  }

  // 展示模型上星数据
  const handleOpenData = () => {
    setAllDataOpen(true);
  }

  const handleCloseData = () => {
    setAllDataOpen(false);
  }

  // 打开指定索引的模态框
  const handleOpenModal = (index) => {
    const newModalState = [...isAlertModalOpen1];
    newModalState[index] = true;
    setIsAlertModalOpen1(newModalState);
  };

  // 关闭指定索引的模态框
  const handleCloseModal = (index) => {
    const newModalState = [...isAlertModalOpen1];
    newModalState[index] = false;
    setIsAlertModalOpen1(newModalState);
  };

  // 轮播按钮
  const handleFront = (index) => {
    const newModalState = [...isAlertModalOpen1];
    newModalState[index] = false;
    newModalState[(index + alertMessages.length - 1) % (alertMessages.length)] = true;
    setIsAlertModalOpen1(newModalState);
  };

  const handleBack = (index) => {
    const newModalState = [...isAlertModalOpen1];
    newModalState[index] = false;
    newModalState[(index + alertMessages.length + 1) % (alertMessages.length)] = true;
    setIsAlertModalOpen1(newModalState);
  };

  useEffect(() => {
    setAllModalsOpen(isAlertModalOpen1.some((isOpen) => isOpen));
  }, [isAlertModalOpen1]); // 监听 isAlertModalOpen1 的变化

  const titleStyle = (name) => ({
    fontWeight: 'bolder',
    color: selectedSatellite === name ? 'lightgreen' : 'aliceblue',
    fontSize: '20px',
    cursor: 'pointer',
    display: 'flex',
    alignItems: 'center',
  });

  const titleStyle2 = (name) => ({
    fontWeight: 'bolder',
    color: selectedModel === name ? 'lightgreen' : 'aliceblue',
    fontSize: '20px',
    cursor: 'pointer',
    display: 'flex',
    alignItems: 'center',
  });

  const handleUploadWithStatus = (record) => {
    if (record.state == 'ready') {
      navigate('/manage', { state: { selectedKey: 'modelMange' } });
    } else {
      navigate('/manage', { state: { selectedKey: 'uploadPage', ...record } });
    }
  };

  const showModelModal = (modelId) => {
    setSelectedModelId(modelId);
    setIsModelModalOpen(true);
  };

  const handleModelModalCancel = () => {
    setIsModelModalOpen(false);
  };

  const descriptionsToken = {
    colorText: 'aliceblue',
    colorTextHeading: 'aliceblue',
    colorTextLabel: 'aliceblue',
    contentColor: 'aliceblue',
    extraColor: 'aliceblue',
    colorSplit: 'aliceblue'
  };

  return (
    <Routes>
      <Route path="/" element={
        <Layout className='ant-layout1'>
          <Header className='ant-layout-header header-border' style={{ paddingLeft: '10px' }}>
            <Image preview='false' src='src/image/logo.png' width={60} style={{ marginBottom: '14px', padding: '0', position: 'relative' }} />
            <span className="header-text" style={{ paddingTop: '20px' }}>
              天算星座·模型上星平台</span>
            <div className='clock-text' style={{ float: 'right', color: 'rgba(15, 150, 200, 0.75)', fontFamily: 'Orbitron' }}>{currentTime}</div>
          </Header>
          <Layout className='ant-layout2' hasSider='True'>
            <Sider className='ant-layout-sider' style={{ background: 'transparent', maxHeight: '80vh' }} width={350}>
              <div className='panel'>
                <Space style={{ backgroundColor: 'rgba(13, 206, 250, 0.47)', border: '1px solid rgba(126, 156, 179, 0.8)', width: '100%' }}>
                  {/* 这个p作用 */}
                  <p></p>
                  <p className="title">卫星信息</p>
                </Space>
                <Space className='collapse-space-btn' style={{ width: '100%' }}>
                  <Button className="collapse-btn" type='text' size='small' onClick={collapseAll} icon={<UpCircleOutlined />}>Collapse All</Button>
                </Space>
                <Collapse activeKey={activeKeys} onChange={handleCollapseChange} style={{ maxHeight: '30vh', overflowY: 'scroll', scrollbarWidth: 'none', height: '30vh' }} items={satelliteItems} className='ant-collapse' />

                <Space style={{ backgroundColor: 'rgba(13, 206, 250, 0.47)', border: '1px solid rgba(126, 156, 179, 0.8)', width: '100%' }}>
                  <p></p>
                  <p className="title" style={{ width: '100%' }}>模型信息</p>
                </Space>
                <div className="transparent-table" style={{ overflowX: 'auto', scrollbarWidth: 'none', marginBottom: '10px' }}>
                  <ConfigProvider componentSize='middle' theme={{ token: tableToken }}>
                    <Table rowHoverable='False' columns={columns(showUploadModal, navigate, showModelModal, handleUploadWithStatus)} dataSource={modelsData} pagination={pagination} style={{ maxHeight: '35vh' }} rowClassName={() => 'custom-row-hover'} />
                  </ConfigProvider>
                </div>
              </div>
            </Sider>
            <Content className='ant-layout-content'>
              <Button className='upload-button' icon={<PlusOutlined />} onClick={handleUploadClick}>模型管理</Button>
              <Button className='upload-button' icon={<PlusOutlined />} onClick={showNewUploadModal} style={{ marginLeft: '120px' }}>选择模型和位置上星</Button>
              <Button className='custom-button' icon={<PlusOutlined />} onClick={jumpToBigdataPlatform} style={{ marginLeft: '310px' }}>数据检索</Button>
              <Button className='upload-button' icon={<PlusOutlined />} onClick={handleDenoisePlatform} style={{ marginLeft: '580px' }}>数据去噪</Button>
              <Button className='upload-button' icon={<PlusOutlined />} onClick={handelDisplayRecallPlatform} style={{ marginLeft: '700px' }}>质量评估</Button>
              <Button className='upload-button' icon={<PlusOutlined />} onClick={handleModelUpdatePlatform} style={{ marginLeft: '820px' }}>模型更新</Button>
              <div>
                {/* 遥控指令生成按钮 */}
                <Button className='upload-button' icon={<PlusOutlined />} onClick={showCommand} style={{ marginLeft: '430px' }}>
                  遥控指令生成
                </Button>

                {/* 弹出框 */}
                <Modal
                  title="输入脚本路径"
                  visible={isCommandVisible}
                  onCancel={handleCommandCancel}
                  footer={null}
                  width={600} // 增加弹出框的宽度
                  centered={true}
                  style={{ textAlign: 'center' }} // 设置弹出框内容居中
                >
                  <Input
                    placeholder="请输入脚本路径"
                    value={scriptPath}
                    onChange={(e) => setScriptPath(e.target.value)}
                    style={{ width: '80%', marginBottom: '20px' }}
                  />

                  <Divider />

                  <div style={{ display: 'flex', justifyContent: 'center' }}>
                    <Button
                      type="primary"
                      onClick={() => {
                        downloadCommands();
                        handleCancel();
                      }}
                      style={{
                        padding: '10px 20px',
                        fontSize: '16px',
                        width: '150px',
                        height: '40px',  // 确保按钮高度合适
                        lineHeight: '40px', // 使文字垂直居中
                        textAlign: 'center', // 确保文字水平居中
                        backgroundColor: '#4CAF50',
                        borderColor: '#4CAF50',
                      }}
                    >
                      确认
                    </Button>
                  </div>
                </Modal>
              </div>

              {/* result button */}
              <ConfigProvider theme={{ token: { colorPrimary: '#18496ECC' } }}>
                <FloatButton
                  shape="circle"
                  type="primary"
                  style={{
                    position: 'absolute',
                    marginBottom: '2%',
                    marginRight: '72%',
                    width: '50px',
                    height: '50px',
                    color: 'aliceblue'
                  }}
                  badge={{
                    dot: true,
                  }}
                  icon={<PieChartTwoTone />}
                  description={'result'}
                  onClick={() => handleOpenData()}
                />
              </ConfigProvider>
              {/* alert button */}
              <ConfigProvider theme={{ token: { colorPrimary: '#18496ECC' } }}>
                <FloatButton
                  shape="circle"
                  type='primary'
                  style={{
                    position: 'absolute',
                    marginBottom: '2%',
                    marginRight: '4%',
                    width: '50px',
                    height: '50px',
                    color: 'aliceblue'
                  }}
                  badge={{
                    dot: true,
                  }}

                  icon={<ExclamationCircleOutlined />}
                  description={'alert'}
                  onClick={() => handleOpenModal(0)}
                />
              </ConfigProvider>
              {/* 未知 */}
              <div id='cesiumContainer' style={{ width: '100%', height: '100%', float: 'right' }}>
                <Row>
                  <Col span={8} offset={19}>
                    <div hidden={isHide} style={{ backgroundColor: 'rgba(24, 73, 110,0.8)', width: '60%', height: '350px', position: 'absolute', zIndex: '1000', marginRight: '20px', marginTop: '25%', border: '1px solid rgba(126, 156, 179, 0.8)' }} className='ready-model-table' >
                      <ConfigProvider componentSize='middle' theme={{ token: tableToken }}>
                        <Table rowHoverable='False' columns={columns(showUploadModal, navigate, showModelModal, handleUploadWithStatus)} dataSource={readyModelsData} pagination={pagination} style={{ maxHeight: '35vh' }} rowClassName={() => 'custom-row-hover'} />
                      </ConfigProvider>
                    </div>
                  </Col>
                </Row>
              </div>
              {/* 点击上星 */}
              <UploadModal isVisible={isUploadModalOpen} handleOk={handleUploadOk} handleCancel={handleUploadCancel} modelName={currentModelName} />
              {isModelModalOpen && (
                <Model
                  modelId={selectedModelId}
                  isModalOpen={isModelModalOpen}
                  handleCancel={handleModelModalCancel}
                />
              )}


              {/* 展开选择模型和位置上星*/}
              <Modal
                style={{ zIndex: '1500', minWidth: '1200px', minHeight: '700px', maxHeight: '700px', width: '1200px', backgroundColor: 'rgba(16, 58, 91, 0.85)', border: '1px solid rgba(126, 156, 179, 0.8)', padding: '0' }}
                open={isNewUploadModalOpen}
                onOk={handleNewUploadModalOK}
                onCancel={handleNewUploadModalCancel}
                className='new-upload-modal'
              >
                <Spin spinning={spinning} percent={percent} fullscreen />
                <Row gutter={16}>
                  <Col span={8}>
                    <h2 style={{ color: 'aliceblue', paddingLeft: '130px' }}>卫星列表</h2>
                    <List
                      split
                      pagination={{
                        position: 'bottom',
                        align: 'center',
                        defaultCurrent: 1,
                        defaultPageSize: 4,
                        pageSize: 4,
                        style: {  // 添加分页组件的样式配置
                          position: 'absolute',  // 固定定位
                          bottom: 0,  // 底部对齐
                          width: '100%',  // 宽度100%
                          boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.15)',  // 添加阴影效果
                        },
                      }}
                      itemLayout="horizontal"
                      dataSource={satelliteListData}
                      renderItem={(item) => (
                        <List.Item>
                          <List.Item.Meta
                            avatar={<Avatar src='src/image/satelliteIcon.png' />}
                            title={
                              <div
                                style={titleStyle(item.title)}
                                onClick={() => handleSatelliteListClick(item.title)}
                              >
                                {item.title}
                                {selectedSatellite === item.title && (
                                  <CheckOutlined style={{ marginLeft: '8px' }} />
                                )}
                              </div>
                            }
                            description={<p style={{ fontSize: '14px', color: 'rgba(255, 255, 255, 0.6)' }}>{item.description}</p>}
                          />
                        </List.Item>
                      )}
                      style={{
                        maxWidth: '400px',
                        minHeight: '542px',
                      }}
                    />
                  </Col>
                  <Col span={8}>
                    <h2 style={{ color: 'aliceblue', paddingLeft: '130px' }}>模型列表</h2>
                    <List
                      split
                      pagination={{
                        position: 'bottom',
                        align: 'center',
                        defaultCurrent: 1,
                        defaultPageSize: 3,
                        pageSize: 3,
                        style: {  // 添加分页组件的样式配置
                          position: 'absolute',  // 固定定位
                          bottom: 0,  // 底部对齐
                          width: '100%',  // 宽度100%
                          boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.15)',  // 添加阴影效果
                        },
                      }}
                      itemLayout="horizontal"
                      dataSource={modelListData}
                      renderItem={(item) => (
                        <List.Item>
                          <List.Item.Meta
                            avatar={<Avatar icon={<OpenAIOutlined />} size={'large'} />}
                            title={
                              <div
                                style={titleStyle2(item.title)}
                                onClick={() => handleModelListClick(item.title)}
                              >
                                {item.title}
                                {selectedModel === item.title && (
                                  <CheckOutlined style={{ marginLeft: '8px' }} />
                                )}
                              </div>
                            }
                            description={<p style={{ fontSize: '14px', color: 'rgba(255, 255, 255, 0.6)' }}>{item.description}</p>}
                          />
                        </List.Item>
                      )}
                      style={{
                        maxWidth: '400px',
                        minHeight: '542px',
                      }}
                    />
                  </Col>
                  <Col span={8}>
                    <div style={{ paddingLeft: '60px', paddingTop: '120px' }}>
                      <p style={{ fontSize: '22px', fontWeight: 'bolder' }}>选定卫星：</p>
                      <Skeleton loading={loadingSatellite} active paragraph={{ rows: 0 }}>
                        <p style={{ fontSize: '18px', paddingLeft: '40px' }}>{selectedSatellite}</p>
                      </Skeleton>
                      <p style={{ fontSize: '22px', fontWeight: 'bolder' }}>选定模型：</p>
                      <Skeleton loading={loadingModel} active paragraph={{ rows: 0 }}>
                        <p style={{ fontSize: '18px', paddingLeft: '40px' }}>{selectedModel}</p>
                      </Skeleton>
                      <p style={{ fontSize: '22px', fontWeight: 'bolder' }}>输入GPS：</p>
                      <Input placeholder="经纬度" value={gpsValue} onChange={(e) => setGpsValue(e.target.value)} />
                      <Divider />
                      <Button
                        type="primary"
                        onClick={handleNewUploadModalOK}
                        style={{ width: '200px', marginLeft: '20px', height: '40px', fontSize: '16px' }}
                      >
                        上星
                      </Button>

                      {/* 上星进度模态框 */}
                      <Modal
                        title="上星进度"
                        visible={isModalVisible}
                        footer={[
                          <Button
                            key="confirm"
                            type="primary"
                            onClick={handleConfirm}
                            disabled={!isCompleted}
                            className="transition-all duration-300"
                          >
                            确认
                          </Button>
                        ]}
                        closable={false}
                        width={1500}
                        bodyStyle={{
                          padding: '24px 32px',
                          overflow: 'hidden'
                        }}
                        style={{
                          top: '50%',
                          transform: 'translateY(-50%)',
                          height: '600px',  // 拉长模态框的高度
                        }}  // 让模态框居中，并增加高度
                      >
                        <div className="flex flex-col h-full">
                          {/* 进度条区域 */}
                          <div className="mb-6">
                            <Progress
                              percent={progress}
                              status={progress === 100 ? 'success' : 'active'}
                              strokeWidth={8}
                              showInfo={true}
                              format={(percent) => `${Math.round(percent)}%`}
                              className="transition-all duration-500"
                            />
                          </div>

                          {/* 步骤指示器 */}
                          <div className="mb-8">
                            <Steps
                              current={currentStep}
                              direction="horizontal"
                              size="default"
                              className="w-full"
                            >
                              {steps.map((step, index) => (
                                <Step
                                  key={index}
                                  title={step}
                                  description={
                                    timePoints[index] ? (
                                      <span className="text-sm text-gray-500 mt-1 block">
                                        {timePoints[index]}
                                      </span>
                                    ) : null
                                  }
                                />
                              ))}
                            </Steps>
                          </div>
                        </div>
                      </Modal>


                      <Divider />
                      <Button ghost danger onClick={handleNewUploadModalCancel}
                        style={{ width: '200px', marginLeft: '20px', height: '40px', fontSize: '16px' }}>退<p></p>出</Button>
                    </div>
                  </Col>
                </Row>
              </Modal>
              {/* 展开数据去噪弹窗 */}
              <Modal
                style={{ zIndex: '1500', minWidth: '1200px', minHeight: '700px', maxHeight: '700px', width: '1200px', backgroundColor: 'rgba(16, 58, 91, 0.85)', border: '1px solid rgba(126, 156, 179, 0.8)', padding: '0', overflow: 'hidden' }}
                open={isDenoiseModelOpen}
                onOk={handleDenoiseModelOK}
                onCancel={handleDenoiseModelCancel}
                className='new-upload-modal'
              >
                <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
                  <Row gutter={16} style={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'row' }}>
                    <Col span={12} style={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                      <Upload
                        accept="image/*"
                        showUploadList={false}
                        beforeUpload={uploadImg}
                      >
                        <h2 style={{ textAlign: 'center', color: '#ffffffff' }}>基线图片</h2>
                        {/* 图片展示 */}
                        <div style={{ overflow: 'hidden', display: 'flex', justifyContent: 'center', maxHeight: '450px', gap: '25px' }}>
                          <Image
                            src={originalImageUrl}
                            preview={false}
                            style={{
                              maxWidth: '100%',  // 限制最大宽度
                              maxHeight: '100%', // 限制最大高度
                              objectFit: 'contain', // 保持比例缩放
                              padding: '0',
                              margin: '0'
                            }}
                          />
                        </div>

                      </Upload>
                    </Col>
                    <Col span={12} style={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                      <Upload
                        accept="image/*"
                        showUploadList={false}
                        beforeUpload={uploadImg}
                      >
                        <h2 style={{ textAlign: 'center', color: '#ffffffff' }}>去噪后图片</h2>
                        {/* 图片展示 */}
                        <div style={{ flex: 1, overflow: 'hidden', display: 'flex', justifyContent: 'center', maxHeight: '450px', gap: '25px' }}>
                          <Image
                            src={denoisedImg}
                            preview={false}
                            style={{
                              maxWidth: '100%',  // 限制最大宽度
                              maxHeight: '100%', // 限制最大高度
                              objectFit: 'contain', // 保持比例缩放
                              padding: '0',
                              margin: '0'
                            }}
                          />
                        </div>
                      </Upload>
                    </Col>
                  </Row>
                  {/* 分界线 */}
                  <div style={{ width: '80%', height: '1px', background: 'linear-gradient(to right, transparent, #19ade3ff, transparent)', margin: '20px auto', }}></div>
                  <Row gutter={16}>
                    <Col span={4} style={{ display: 'flex', flexDirection: 'column', padding: '0 20px', justifyContent: 'space-around' }}>
                      <div style={{ textAlign: 'center', fontSize: '18px', color: '#fff' }}>模型选择</div>
                      {Object.keys(dataDenoisePersent).map(model => (
                        <Button
                          key={model}
                          type="primary"
                          onClick={() => changeDenoiseModel(model)}
                          style={{
                            width: '150px', height: '40px', fontSize: '16px', margin: '16px auto',
                            color: '#fff',
                            backgroundColor: selectedModelName === model ? '#1677ff' : '#164a72d9',
                          }}
                        >
                          {model}
                        </Button>
                      ))}
                    </Col>
                    <Col span={4} style={{ display: 'flex', flexDirection: 'column', padding: '0 20px', justifyContent: 'space-around' }}>
                      <div style={{ textAlign: 'center', fontSize: '18px', color: '#fff' }}>数据集选择</div>
                      {QualityAssessDatasetName.map(model => (
                        <Button
                          key={model}
                          type="primary"
                          onClick={() => changeDenoiseDataset(model)}
                          style={{
                            width: '150px', height: '40px', fontSize: '16px', margin: '16px auto',
                            color: '#fff',
                            backgroundColor: selectedDenoiseDatasetName === model ? '#1677ff' : '#164a72d9',
                          }}
                        >
                          {model}
                        </Button>
                      ))}
                    </Col>
                    <Col span={6} style={{ display: 'flex', flexDirection: 'column', padding: '0 20px', justifyContent: 'space-around' }}>
                      {/* 预测准确率 */}
                      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
                        <Progress
                          type="circle"
                          percent={basePersent}
                          strokeWidth={10}
                          strokeColor={'#77FF16'}
                          trailColor={'#164a72d9'}
                          format={percent => (
                            <span style={{ color: '#ffffffff', fontWeight: 'bold' }}>
                              {percent} %
                            </span>
                          )} // 显示格式
                        />
                        <div style={{ fontSize: '18px', marginTop: '15px', color: '#fff' }}>对基线图片推理准确率</div>
                      </div>
                    </Col>
                    <Col span={6} style={{ display: 'flex', flexDirection: 'column', padding: '0 20px', justifyContent: 'space-around' }}>
                      {/* 预测准确率 */}
                      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
                        <Progress
                          type="circle"
                          percent={denoisePersent}
                          strokeWidth={10}
                          strokeColor={'#77FF16'}
                          trailColor={'#164a72d9'}
                          format={percent => (
                            <span style={{ color: '#ffffffff', fontWeight: 'bold' }}>
                              {percent} %
                            </span>
                          )} // 显示格式
                        />
                        <div style={{ fontSize: '18px', marginTop: '15px', color: '#fff' }}>对去噪图片推理准确率</div>
                      </div>
                    </Col>
                    <Col span={4} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                      <Button
                        type="primary"
                        onClick={() => startDenoise(selectedModelName)}
                        style={{
                          width: '200px', height: '40px', fontSize: '16px', margin: '16px auto',
                          color: '#fff', backgroundColor: '#12cf86ff'
                        }}
                      >
                        开始去噪
                      </Button>
                    </Col>
                  </Row>
                </div>

              </Modal>
              {/* 展开质量评估弹窗 */}
              <Modal
                style={{
                  zIndex: '1500',
                  minWidth: '1200px',
                  minHeight: '700px',
                  maxHeight: '700px',
                  width: '1200px',
                  backgroundColor: 'rgba(16, 58, 91, 0.85)',
                  border: '1px solid rgba(126, 156, 179, 0.8)',
                  overflow: 'auto'
                }}
                open={isDisplayRecall}
                onOk={handleDisplayRecallModelOK}
                onCancel={handleDisplayRecallModelCancel}
                className='new-upload-modal'
              >
                {/* 垂直排列的卡片容器 */}
                <div style={{
                  display: 'flex',
                  flexDirection: 'column',
                  height: '100%',
                  justifyContent: 'space-between',
                  marginTop: '30px'
                }}>
                  <div style={{ display: "flex", flexDirection: 'column', gap: '16px' }}>
                    <Card title="基于数据质量评估的星地无效数据召回率测试" className='quality-assess-card'>
                      <div style={{ fontSize: '16px' }}>当前测试数据集：{selectedDatasetName}</div>
                      <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
                        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-around', height: '200px', alignItems: 'center' }}>
                          <Progress
                            type="circle"
                            percent={displayRecallQualityAssess}
                            strokeWidth={10}
                            strokeColor={'#77FF16'}
                            trailColor={'#164a72d9'}
                            format={percent => (
                              <span style={{ color: '#77FF16', fontWeight: 'bold' }}>
                                {percent} %
                              </span>
                            )} // 显示格式
                          />
                          <div style={{ textAlign: 'center', fontSize: '16px' }}>{displayRecallQualityAssessText}</div>
                        </div>
                        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-around', height: '200px', alignItems: 'center' }}>
                          <Progress
                            type="circle"
                            percent={displayRecallQualityNotAssess}
                            strokeWidth={10}
                            strokeColor={'#77FF16'}
                            trailColor={'#164a72d9'}
                            format={percent => (
                              <span style={{ color: '#77FF16', fontWeight: 'bold' }}>
                                {percent} %
                              </span>
                            )} // 显示格式
                          />
                          <div style={{ textAlign: 'center', fontSize: '16px' }}>{displayRecallQualityNotAssessText}</div>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
                          <span style={{ fontSize: '40px', fontWeight: '700', transition: 'transform 0.3s ease', color: '#77FF16', margin: '20px auto' }}>
                            {displayRecallQualityAssessTimeCost}%
                          </span>
                          <span style={{ fontSize: '16px' }}>{"无效数据召回率相对降低"}</span>
                        </div>
                        <div style={{ width: '400px', display: 'flex', flexDirection: 'column', justifyContent: 'space-around', height: '200px' }}>
                          <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-around', flexWrap: 'wrap' }}>
                            {QualityAssessDatasetName.map(dataset => (
                              <Button
                                key={dataset}
                                type="primary"
                                onClick={() => changeQualityAssessDatasetName(dataset)}
                                style={{
                                  width: '150px', height: '40px', fontSize: '16px', margin: '16px auto',
                                  color: '#fff',
                                  backgroundColor: selectedDatasetName === dataset ? '#1677ff' : '#164a72d9',
                                }}
                              >
                                {dataset}
                              </Button>
                            ))}
                          </div>
                          <Button
                            type="primary"
                            onClick={() => startQualityAssess()}
                            style={{ width: '250px', height: '40px', fontSize: '16px', color: '#fff', margin: '0 auto', backgroundColor: '#12cf86ff' }}
                          >
                            开始测试
                          </Button>

                        </div>
                      </div>

                    </Card>
                    <Card title="星上仿真平台数据传输质量功能测试" className='quality-assess-card'>
                      <div style={{ fontSize: '16px' }}>当前测试数据集：南海周边数据集</div>
                      <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
                        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-around', height: '200px', alignItems: 'center' }}>
                          <Progress
                            type="circle"
                            percent={displayRecallLightWeightPercent}
                            strokeWidth={10}
                            strokeColor={'#77FF16'}
                            trailColor={'#164a72d9'}
                            format={percent => (
                              <span style={{ color: '#77FF16', fontWeight: 'bold' }}>
                                {percent} %
                              </span>
                            )}
                          />
                          <div style={{ textAlign: 'center', fontSize: '16px' }}>{displayRecallLightWeightText}</div>
                        </div>
                        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-around', height: '200px', alignItems: 'center' }}>
                          <Progress
                            type="circle"
                            percent={displayRecallNotLightWeightPercent}
                            strokeWidth={10}
                            strokeColor={'#77FF16'}
                            trailColor={'#164a72d9'}
                            format={percent => (
                              <span style={{ color: '#77FF16', fontWeight: 'bold' }}>
                                {percent} %
                              </span>
                            )}
                          />
                          <div style={{ textAlign: 'center', fontSize: '16px' }}>{displayRecallNotLightWeightText}</div>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
                          <span style={{ fontSize: '40px', fontWeight: '700', transition: 'transform 0.3s ease', color: '#77FF16', margin: '20px auto' }}>
                            {displayRecallLightWeightTimeCost}%
                          </span>
                          <span style={{ fontSize: '16px' }}>{"无效数据召回率相对降低"}</span>
                        </div>
                        <div style={{ width: '400px', display: 'flex', flexDirection: 'column', justifyContent: 'space-around', height: '200px' }}>
                          <Button
                            type="primary"
                            onClick={() => startLightWeight()}
                            style={{ width: '250px', height: '40px', fontSize: '16px', color: '#fff', margin: '0 auto', backgroundColor: '#12cf86ff' }}
                          >
                            开始测试
                          </Button>

                        </div>
                      </div>
                    </Card>
                    <Card title="基于生成式的数据质量评估在轨验证" className='quality-assess-card'>
                      <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
                        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-around', height: '200px', alignItems: 'center' }}>
                          <Progress
                            type="circle"
                            percent={displayRecallDataTransferPercent}
                            strokeWidth={10}
                            strokeColor={'#77FF16'}
                            trailColor={'#164a72d9'}
                            format={percent => (
                              <span style={{ color: '#77FF16', fontWeight: 'bold' }}>
                                {percent} %
                              </span>
                            )}
                          />
                          <div style={{ textAlign: 'center', fontSize: '16px' }}>{displayRecallDataTransferText}</div>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
                          <span style={{ fontSize: '40px', fontWeight: '700', transition: 'transform 0.3s ease', color: '#77FF16', margin: '20px auto' }}>
                            {displayRecallTimeCost}秒
                          </span>
                          <span style={{ fontSize: '16px' }}>{"耗时"}</span>
                        </div>
                        <div style={{ width: '400px', display: 'flex', flexDirection: 'column', justifyContent: 'space-around', height: '200px' }}>
                          <Button
                            type="primary"
                            onClick={() => startDataTransfer()}
                            style={{ width: '250px', height: '40px', fontSize: '16px', color: '#fff', margin: '0 auto', backgroundColor: '#12cf86ff' }}
                          >
                            开始测试
                          </Button>
                        </div>
                      </div>
                    </Card>
                  </div>
                </div>
              </Modal>

              {/* 展开模型更新弹窗 */}
              <Modal
                style={{ zIndex: '1500', minWidth: '1200px', minHeight: '700px', maxHeight: '700px', width: '1200px', backgroundColor: 'rgba(16, 58, 91, 0.85)', border: '1px solid rgba(126, 156, 179, 0.8)', padding: '0', overflow: 'hidden' }}
                open={isModelUpdateOpen}
                onOk={handleModelUpdateModelOK}
                onCancel={handleModelUpdateModelCancel}
                className='new-upload-modal'
              >
                <div style={{ display: 'flex', flexDirection: 'column' }}>
                  <div style={{ display: 'flex', margin: '16px 0', alignItems: 'center', justifyContent: 'flex-start', gap: '50px' }}>
                    <div style={{ textAlign: 'center', fontSize: '18px', color: '#fff' }}>模型选择</div>
                    {Object.keys(dataDenoisePersent).map(model => (
                      <Button
                        key={model}
                        type="primary"
                        onClick={() => changeModelUpdateSelectedModel(model)}
                        style={{
                          width: '150px', height: '40px', fontSize: '16px', color: '#fff',
                          backgroundColor: modelUpdateSelectedModel === model ? '#1677ff' : '#164a72d9',
                        }}
                      >
                        {model}
                      </Button>
                    ))}
                  </div>
                  <div style={{ display: 'flex', margin: '16px 0', alignItems: 'center', justifyContent: 'flex-start', gap: '50px' }}>
                    <div style={{ textAlign: 'center', fontSize: '18px', color: '#fff' }}>更新方法</div>
                    {modelUpdateMethod.map(method => (
                      <Button
                        key={method}
                        type="primary"
                        onClick={() => changeModelUpdateSelectedMethod(method)}
                        style={{
                          width: '300px', height: '40px', fontSize: '16px', color: '#fff',
                          backgroundColor: modelUpdateSelectedMethod === method ? '#1677ff' : '#164a72d9',
                        }}
                      >
                        {method}
                      </Button>
                    ))}
                  </div>
                </div>
                <div>
                  {/* 文本区域 - 随进度变化 */}
                  <div style={{
                    marginBottom: 20,
                    marginTop: 40,
                    borderRadius: 4,
                    minHeight: 60,
                    display: 'flex',
                    alignItems: 'center',
                    color: '#fafafa',
                    fontSize: '20px',
                    padding: '8px',
                    background: '#0d417cff'
                  }}>
                    {statusText}
                  </div>

                  {/* 普通进度条 - 在下方 */}
                  <div style={{ marginBottom: 20 }}>
                    <Progress
                      percent={ModelUpdateProgress}
                      status={ModelUpdateProgress === 100 ? "success" : "active"}
                      strokeWidth={8}
                    />
                  </div>
                  <div style={{ display: 'flex', margin: '0 auto' }}>
                    <Button
                      type="primary"
                      onClick={handleControlClick}
                      style={{
                        width: '200px', height: '40px', fontSize: '16px', margin: '16px auto',
                        color: '#fff', backgroundColor: '#12cf86ff'
                      }}
                    >
                      开始更新
                    </Button>
                  </div>
                </div>
              </Modal>


              {/* 展开alert button */}
              <AlertCarousel />
              {/* 展开result button */}
              <DataCarousel />
            </Content>
          </Layout>
        </Layout>
      } />
      < Route path="/model-manage" element={< ModelManage />} />
      < Route path="/manage" element={< Management />} />
    </Routes >
  )
}

export default App;